<script>
export default {

  data() {
    return {
      dialogVisible: false,
      requestParam: {
        oldPassword: "",
        newPassword: ""
      },
      confirmPassword: "",
      changePasswordLoading: false,

    }
  },
  methods: {
    changePassword() {
      if (!this.requestParam.oldPassword) {
        this.$message({
          message: "请输入旧密码",
          type: 'error'
        });
        return;
      }

      if (!this.requestParam.newPassword) {
        this.$message({
          message: "请输入新密码",
          type: 'error'
        });
        return;
      }

      if (!this.confirmPassword) {
        this.$message({
          message: "请确认新密码",
          type: 'error'
        });
        return;
      }

      if (this.requestParam.newPassword !== this.confirmPassword) {
        this.$message({
          message: "两次输入的密码不一致",
          type: 'error'
        });
        return;
      }

      this.changePasswordLoading = true;
      this.$kt.requestSecurity.send({
        // 发送修改密码的请求
        uri: "/user-account-web/userAccount/changePassword",
        method: "post",
        data: this.requestParam,
        stateSuccess: (res) => {
          // 使用message提示
          this.$message({
            message: res.msg,
            type: 'success'
          });
          this.changePasswordLoading = false;

          setTimeout(() => {
            // 关闭弹窗
            this.close();
            // 刷新requestParam
            this.requestParam = {
              oldPassword: "",
              newPassword: ""
            };
            this.confirmPassword = "";
          }, 500);
        },
        stateFail: (err) => {
          this.$message({
            message: err.errMsg,
            type: 'error'
          });
          this.changePasswordLoading = false;
        }
      })
    },
    open() {
      this.dialogVisible = true;
    },
    close() {
      this.dialogVisible = false;
    }
  }
}
</script>

<template>
  <el-dialog
      v-model="dialogVisible"
      title="修改密码"
      width="300px">

    <el-form
        label-position="top"
        :model="requestParam"
        ref="ruleFormRef"
        label-width="100px">

      <el-form-item
          label="旧密码"
          prop="oldPassword">
        <el-input
            v-model="requestParam.oldPassword"
            type="password"
            @keyup.enter.native="changePassword"
            placeholder="请输入旧密码"></el-input>
      </el-form-item>

      <el-form-item
          label="新密码"
          prop="newPassword">
        <el-input
            v-model="requestParam.newPassword"
            type="password"
            @keyup.enter.native="changePassword"
            placeholder="请输入新密码"></el-input>
      </el-form-item>

      <el-form-item
          label="确认密码"
          prop="confirmPassword">
        <el-input
            v-model="confirmPassword"
            type="password"
            @keyup.enter.native="changePassword"
            placeholder="请再次输入新密码"></el-input>
      </el-form-item>

        <el-button
            type="primary"
            @click="changePassword"
            class="change-btn"
            :loading="changePasswordLoading">修改密码</el-button>
      <div style="height: 20px"></div>

    </el-form>

  </el-dialog>
</template>

<style scoped>
.change-btn{
  width: 100%;
}
</style>